<template>
  <div class="upload-download-wrap">
    <el-button plain @click="doDownload">下载模板</el-button>

    <el-upload
      v-if="isDevelop"
      :show-file-list="false"
      :headers="{
        userCode,
        orgCode
      }"
      name="uploadFile"
      class="upload-demo"
      :action="basePath + uploadUrl"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-success="success"
      :on-error="error"
    >
      <!-- :file-list="fileList" -->
      <el-button plain>批量导入</el-button>
      <template #tip>
        <!-- <div class="el-upload__tip">jpg/png files with a size less than 500kb</div> -->
      </template>
    </el-upload>
    <el-upload
      v-else
      :show-file-list="false"
      :headers="{
        'Content-Type': 'application/json; application/octet-stream',
        userCode,
        orgCode
      }"
      class="upload-demo"
      :action="uploadUrl"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <!-- :file-list="fileList" -->
      <el-button plain>批量导入</el-button>
      <template #tip>
        <!-- <div class="el-upload__tip">jpg/png files with a size less than 500kb</div> -->
      </template>
    </el-upload>
  </div>
  <ImportTipVue
    :dialog-visible="showImportResult"
    @dlgClose="
      () => {
        showImportResult = false;
      }
    "
    :import-tip="importTip"
  />
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

import { downLoadFile } from '@/utils/http';
import { ElMessage } from 'element-plus/lib/index';
import ImportTipVue from './importTip.vue';

let userCode: any, orgCode: any;

const isDevelop = process.env.VUE_APP_LOCAL_COOKIE === 'development';
const basePath = process.env.VUE_APP_SERVERPATH;
if (isDevelop) {
  userCode = 'superadmin';
  orgCode = '10000';
}

export default defineComponent({
  components: { ImportTipVue },
  props: {
    downloadUrl: {
      type: String as PropType<string>,
      default: ''
    },
    uploadUrl: {
      type: String as PropType<string>,
      default: ''
    }
  },
  emits: ['success'],
  data() {
    return {
      fileList: [],
      userCode,
      orgCode,
      isDevelop,
      basePath,
      showImportResult: false,
      importTip: null as any
    };
  },
  methods: {
    async doDownload() {
      try {
        downLoadFile({
          url: this.downloadUrl,
          method: 'get'
        });
      } catch (e) {}
    },
    handleRemove(file: any, fileList: any) {
      console.log(file, fileList);
    },
    handlePreview(file: any) {
      console.log(file);
    },
    handleExceed(files: any, fileList: any) {},
    beforeRemove(file: any, fileList: any) {
      // return this.$confirm(`Cancel the transfert of ${file.name} ?`);
    },
    success(res: any) {
      const { code, data, msg } = res;
      if (code === 200) {
        const { batchNo, duplicate, fail, success, total } = data;
        this.importTip = {
          batchNo,
          duplicate,
          fail,
          success,
          total
        };
        this.showImportResult = true;
        this.$emit('success');
      } else {
        ElMessage.error(msg);
      }
    },
    error() {
      console.log(arguments);
    }
  }
});
</script>

<style lang="scss" scope>
.upload-download-wrap {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;

  .el-button {
    min-height: 36px;
    padding: 7px 18px;
    font-size: 12px;
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
}
</style>
